<template>
    <div>
    <el-card>
    <el-form :inline="true" :model="query" label-width="100px" size="small">
      <!-- 申请类型 -->
      <el-form-item  class="query-form-item">
        <span>申请类型：</span>
        <el-select  v-model="query.transactiontype" placeholder="请选择申请类型" @change="onSubmit"  clearable>
            <!-- <el-option label="全部" value></el-option> -->
            <el-option label="付款" value="1"></el-option>
            <el-option label="结款" value="2"></el-option>
        </el-select>
      </el-form-item>
      <!-- 申请状态 -->
      <el-form-item class="query-form-item" >
        <span>申请状态：</span>
        <el-select v-model="query.auditstatus"  placeholder="请选择申请状态" @change="onSubmit" clearable>
          <!-- <el-option label="全部" value></el-option> -->
          <el-option label="待审核" value="0"></el-option>
          <el-option label="已完成" value="1"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form :inline="true" :model="query" size="small" >

      <!-- 关键词检索 -->
      <el-form-item>
      <span> 公司名称：</span>
      <el-form-item class="query-form-item" >

        <el-input v-model="query.companyname" placeholder="请输入搜索关键词" prefix-icon="el-icon-search" clearable style="magrin-left:30px;"></el-input>
      </el-form-item>
      </el-form-item>
      <!-- 查询框 -->
      <el-form-item>
        <el-button type="primary" icon="el-icon-refresh" @click="onRest"></el-button>
        <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>
      <!-- table表单 -->
    <el-table  ref="singleTable" :data="tableData" v-loading="loading"   style="width: 100%">
        <el-table-column label="序号" type="index" align="center" width="50" fixed>  </el-table-column>
        <el-table-column prop="auditstatus" align="center" label="申请状态" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.auditstatus == 0" style="color:#ffa659;">待审核</span>
            <span v-else-if="scope.row.auditstatus == 1" style="color:#4acf1e;">已完成</span>
          </template>
        </el-table-column>
        <el-table-column prop="transactiontype" align="center" label="申请类型"  width="80">
           <template slot-scope="scope">
            <span v-if="scope.row.transactiontype == 1" style="color:#ffa659;">付款</span>
            <span v-else-if="scope.row.transactiontype == 2" style="color:#4acf1e;">结款</span>
          </template>
        </el-table-column>
        <el-table-column prop="companyname" align="center" :show-overflow-tooltip="true" label="申请商城名称" width="280"></el-table-column>

        <el-table-column prop="corporateaccount" align="center" :show-overflow-tooltip="true" label="收款账户" width="200"></el-table-column>
        <el-table-column prop="bankaccount" align="center" :show-overflow-tooltip="true" label="开户行" width="200"></el-table-column>
        <el-table-column prop="tel" align="center" label="联系电话"  width="110"></el-table-column>
        <el-table-column prop="transactionquota" align="center" label="申请金额（元）"  width="150"> </el-table-column>
        <el-table-column prop="transactionnumber"  :show-overflow-tooltip="true" align="center" label="转账单编号" width="200"></el-table-column>

        <el-table-column prop="applicationtime" align="center" label="申请时间" width="180">
         <template slot-scope="scope">
          <i class="el-icon-time" v-if="scope.row.applicationtime!=null"></i>
          <span v-if="scope.row.applicationtime!=null">{{ scope.row.applicationtime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
          <span v-else>无</span>
         </template>
        </el-table-column>
        <el-table-column  prop="completetime" align="center" label="审核时间" width="180">
         <template slot-scope="scope">
          <i class="el-icon-time" v-if="scope.row.completetime!=null"></i>
          <span v-if="scope.row.completetime!=null">{{ scope.row.completetime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
          <span v-else>无</span>
         </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="120" fixed="right">
        <template slot-scope="scope">
            <el-button type="primary" size="mini"  @click=" centerDialogVisible = true,auditPass(scope.$index, scope.row)" :disabled="scope.row.auditstatus !=0">审核通过</el-button>
        </template>
        </el-table-column>
        </el-table>

       <!-- 点击审核通过跳出dialog -->
      <el-dialog title="设置转账单编号" :visible.sync="centerDialogVisible" width="20%" center :close-on-click-modal="false">
        <template slot="title">
                <div class="avue-crud__dialog__header">
                    <span class="el-dialog__title">
                        <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
                       设置转账单编号
                    </span>
                </div>
        </template>
        <el-card>
         <el-form :model="formData"   class="demo-ruleForm" :rules="formDatarules" >
          <el-form-item  prop="transactionnumber">
              <el-input  v-model="formData.transactionnumber"  placeholder="请输入转账单编号"   clearable></el-input>
          </el-form-item>
        </el-form>
        </el-card>
        <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible=false">取 消</el-button>
            <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>

        <el-pagination class="pagination-container"  background  :page-size="query.pageSize"
        @size-change="handleSizeChange" @current-change="handleCurrentChange"  layout="total,sizes,prev, pager, next, jumper"
        :current-page="this.query.currentPage"
        :page-sizes="[5,10, 20, 30, 50]"
        :total="totalNumber"></el-pagination>
      </el-card>
    </div>
</template>
<script>
  import { getTradingAccountRecord,audit } from "../../api/moneyManager/index.js";

  export default {
    data() {
      return {
        tableData: [],//列表集合
        // tableList:{},//详情框信息
        query: {
          currentPage: 1,
          pageSize: 5  ,
          transactiontype:"",//申请类型:1.付款  2.结款
          auditstatus:"",   // 申请状态：0.待审核  1.已完成
          companyname:""
        },
        formData:{},
        totalNumber: 0,
        loading: false,
        dataList:[],
        centerDialogVisible: false,
        formLabelWidth: '120px',
        formDatarules:{
          //编辑表单校验
          transactionnumber: {required: true,message: "请输入转账单号",trigger: "blur"},
        },
      }
    },
    methods: {

      // 列表数据获取
      getTradingAccountRecord(){
        this.loading = true;
        getTradingAccountRecord(this.query)
        .then(data=>{
            // console.log(data)
            if (data.code != 0) {
                this.$message.error(data.message);
                this.loading = false;
                return false;
            }
            this.tableData=data.data.list || []

            this.totalNumber = data.data.totalNumber || 0;
            console.log(this.tableData)
            setTimeout(() => {
             this.loading = false;
            }, 0.3 * 1000);
          })
          .catch(()=>{
             this.loading = false;
             this.tableData =[]
          })
      },
      //审核通过
      auditPass(i,val){
       console.log(i)
       console.log(val)
       this.formData = val

      },
      //提交表单信息
      submit(){

        this.formData.auditstatus = 1
        // console.log(this.formData)
        let data = this.formData
       audit (data)//调用存储接口
       .then(data=>{
         console.log(data)
         if (data.code != 0) {
            this.$message.error(data.message);
            this.loading = false;
            return false;
          }else {
            this.$message.success("恭喜审核通过");
            this.centerDialogVisible =false
            this.getTradingAccountRecord()
        }
          setTimeout(() => { this.loading = false;}, 0.3 * 1000);
        })
        .catch(()=>{
            this.loading = false;
        })
      },
      //刷新
      onRest() {
            // this.$router.push({
            //     path: ""
            // });
        this.query = {
          currentPage: 1,
          pageSize: 5  ,
          transactiontype:"",//申请类型:1.付款  2.结款
          auditstatus:"",   // 申请状态：0.待审核  1.已完成
          companyname:""
        };

        this.getTradingAccountRecord();
      },
      //查询
      onSubmit() {
        this.query.currentPage = 1;
        this.getTradingAccountRecord();
        // console.log('submit!');
      },

      handleCurrentChange(val) {
        this.query.currentPage = val;
            //scrollTo(0, 800);
        this.getTradingAccountRecord();
      },
      handleSizeChange(val) {
        this.query.pageSize = val;
        this.getTradingAccountRecord();
      },
    },
    mounted(){
      this.getTradingAccountRecord()
    },
   created(){
    //  this.applicationList();
   }

  }
</script>
